<template>
  <sec-form
    ref="search-bar-form"
    :class="formClass"
    :label-width="labelWidth"
    label-suffix=":"
    size="medium"
    class="search-bar-form formClass"
    v-bind="$attrs"
  >
    <slot></slot>
    <sec-form-item class="search-bar-buttons">
      <sec-button size="medium" type="primary" @click="search">查询</sec-button>
      <sec-button size="medium" @click="reset">重置</sec-button>
      <sec-button
        v-show="!showMore && ifShowMore"
        class="show-more"
        type="text"
        @click="showMoreFn(true)"
      >
        展开
        <i class="sec-icon-danxianjiantouxia el-icon--right"></i>
      </sec-button>
      <sec-button
        v-show="showMore && ifShowMore"
        class="show-more"
        type="text"
        @click="showMoreFn(false)"
      >
        收起
        <i class="sec-icon-danxianjiantoushang el-icon--right"></i>
      </sec-button>
      <slot name="buttons"></slot>
    </sec-form-item>
    <slot v-if="showMore" name="secondLine"></slot>
  </sec-form>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    labelWidth: {
      type: String,
      default: '8px'
    },
    formClass: {
      type: String,
      default: 'search-form-20'
    },
    ifShowMore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showMore: false
    }
  },
  methods: {
    search() {
      this.$emit('search')
    },
    reset() {
      this.$refs['search-bar-form'].resetFields()
      this.$emit('reset')
    },
    showMoreFn(flag) {
      this.showMore = flag
      this.$emit('calHeight')
    }
  }
}
</script>
<style lang="scss">
.search-bar-form.formClass {
  background: #f9fbff;
  width: 100%;
  border: 1px solid #ebeef5;
  padding: 8px 8px 0px 0px;
  .el-button + .el-button {
    margin-left: 8px;
  }

  .search-bar-buttons {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    white-space: nowrap;
    // min-width:calc(100% - 850px);
    .show-more {
      font-weight: normal;
    }
    .el-icon--right {
      font-size: 12px;
      margin-left: 4px;
    }
  }
}
</style>
